<template>
  <span>
    <el-select v-if="mode=='select' && !multiple" v-model="selectedVal" :placeholder="placeholder" :disabled="disabled" filterable style="width:100%" @change="handleChange">
      <el-option
        v-for="item in options"
        :key="item.dataDictItemCode"
        :label="item.dataDictItemName"
        :value="item.dataDictItemCode"
      />
    </el-select>
    <el-select v-if="mode=='select' && multiple" v-model="selectedVal" :placeholder="placeholder" :disabled="disabled" multiple filterable style="width:100%" @change="handleChange">
      <el-option
        v-for="item in options"
        :key="item.dataDictItemCode"
        :label="item.dataDictItemName"
        :value="item.dataDictItemCode"
      />
    </el-select>
    <el-radio-group v-if="mode=='radio'" v-model="selectedVal">
      <el-radio
        v-for="item in options"
        :key="item.dataDictItemCode"
        :label="item.dataDictItemCode"
      >
        {{ item.dataDictItemName }}
      </el-radio>
    </el-radio-group>
  </span>
</template>
<script>
export default {
  props: {
    value: {
      type: [String, Array, Number],
      default() {
        return ''
      }
    },
    mode: {
      type: String,
      default() {
        return 'select'
      }
    },
    placeholder: {
      type: String,
      default() {
        return '请选择'
      }
    },
    code: {
      type: String,
      required: true
    },
    multiple: {
      type: Boolean,
      default() {
        return false
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    filterData: {
      type: Array,
      default() {
        return []
      }
    },
    isShowAll: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      typeGroupCode: this.code,
      selectedVal: '',
      options: []
    }
  },
  watch: {
    value: function(val) {
      if (typeof (val) === 'number') {
        val += ''
      }
      setTimeout(() => {
        this.selectedVal = val
      }, 200)
    },
    selectedVal: function(val) {
      this.$emit('input', val)
    }
  },
  mounted() {
    this.initData()
  },
  created() {
    this.selectedVal = this.value + ''
  },
  methods: {
    async initData() {
      try {
        const response = await this.$store.dispatch('findDataDictItemByCode', this.typeGroupCode)
        let dataDictItemVos = []
        if (this.isShowAll) {
          dataDictItemVos.push({
            dataDictItemCode: '',
            dataDictItemName: '全部'
          })
          dataDictItemVos.push(...response)
        } else {
          dataDictItemVos = response
        }

        if (this.filterData.length > 0) {
          dataDictItemVos = response.filter(arrItem => {
            return this.filterData.includes(arrItem.dataDictItemCode)
          })
        }
        this.options = dataDictItemVos
      } catch (_) {
        console.log()
      }
      // this.treeData = response
    },
    handleChange() {
      this.$emit('change')
    }
  }
}
</script>
<style lang="scss">
</style>
